<template lang="">
  <div>
    <van-nav-bar title="舞蹈专业" left-arrow />
    <div class="img1"><img src="./images/组 1(10).png" /></div>
    <div class="information">招生对象</div>
    <div class="jeisao">
      <div class="jiesao1">
        <div>招生对象：高中年级（高一、高二、高三）</div>
        <div>集训时间：每年5月至12月参加省联考结束</div>
        <div>班型：小班教学制（平均15~20人/班）含集训、暑假 班、艺考冲刺班</div>
        <div>上课时间：</div>
        <div>春夏季：9:00-12:00 14:00-17:00</div>
        <div>秋冬季：9:00-12:00 14:30-17:30</div>
        <div>课程前期每周休息1天半，后期冲刺阶段每周休息1天。</div>
      </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="./images/组 1(9).png" />
      </van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div class="btns">
      <van-button round type="info" class="btnss" @click="showPopup"
        >立即报名</van-button
      >
    </div>
    <van-popup v-model="show">
  <div class="popup1">
          <div class="popup">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="姓名"
            required
            placeholder="输入姓名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            required
            readonly
            clickable
            name="picker"
            :value="value"
            label="年龄"
            placeholder="点击选择年龄"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
           <van-field name="radio" label="性别" required>
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">单选框 1</van-radio>
                <van-radio name="2">单选框 2</van-radio>
              </van-radio-group>
            </template>
          </van-field>
           <van-field
            required
            readonly
            clickable
            name="picker"
            :value="value"
            label="城市"
            placeholder="点击选择城市"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
            <van-field
            v-model="username"
            name="用户名"
            label="电话"
            required
            placeholder="输入电话号码"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <div style="margin: 16px;margin-top:95px">
            <van-button round block type="info" native-type="submit"
              >去支付</van-button
            >
          </div>
        </van-form>
      </div>
  </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    showPopup () {
      this.show = true
    }
  }
}
</script>
<style>
.van-nav-bar {
  background-color: #f7f7f7;
}
.jeisao {
  width: 375px;
  height: 220px;
  background-color: #f2f0ed;
  margin-top: 16.5px;
  font-size: 13px;
  line-height: 24px;
}
.jiesao1 {
  width: 338.5px;
  height: 181.5px;
  padding-top: 17px;
  margin-left: 15px;
}
.img1 {
  margin-left: 15px;
}
.information {
  font-size: 17px;
  text-align: center;
  padding-top: 25px;
  background: url("./images/矩形 2.png") no-repeat bottom;
}
.my-swipe {
  padding-left: 15px;
  margin-top: 29px;
}
.btns {
  position: fixed;
  top: 600px;
  width: 375px;
  height: 75px;
  background-color: #ffffff;
}
.btnss {
  /* text-align: center; */
  margin-left: 15px;
  margin-top: 15px;
  width: 345px;
  height: 45px;
  background-color: #f07203;
  border: 0;
}
.popup1{
     border-radius: 18px;
}
.popup {
  width: 320px;
  height: 450px;
  background-color: #ffffff;
  border-radius: 18px!important;
  margin-left: 15px;
  margin-top: 15px;
}
.van-cell {
  font-size: 13px;
}
.van-button--info {
  background-color: #fe7003;
  border: 1px solid #fe7003;

}
.van-popup--center{
      border-radius: 10px;
}
</style>
